<template>
  <div class="main-box">
    <TreeFilter label="name" title="部门列表" :requestApi="treeDept" :default-value="initParam.deptId" @change="changeDept" />
    <div class="table-box">
      <ProTable
        ref="proTableRef"
        row-key="id"
        :init-param="initParam"
        title="账户列表"
        :columns="columns"
        :request-api="loadTable"
        highlight-current-row>
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <ElButton type="primary" :icon="CirclePlus" @click="onAddClicked">新增</ElButton>
          <!-- <ElButton type="primary" plain :icon="Upload" @click="onImportClicked">导入</ElButton> -->
          <!-- <ElButton type="primary" plain :icon="Download" @click="onExportClicked">导出</ElButton> -->
        </template>
        <!-- 账户操作 -->
        <template #operation="scope">
          <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
          <ElButton type="primary" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
          <ElButton type="primary" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
        </template>
      </ProTable>
      <AccountForm ref="formRef" @success="refresh" />
      <!-- <UploadPanel ref="uploadFormRef" /> -->
    </div>
  </div>
</template>

<script setup lang="ts" name="ZLDemo">
import { CirclePlus, Delete, EditPen, View } from '@element-plus/icons-vue'
import AccountForm from './account-form.vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { removeUser, pageUser } from '@api/uc/user'
import { listRoleOption } from '@api/uc/role'
import { getAllDeptTree } from '@/utils/param'
import { User } from '@api/uc/user/interface'
import { listDictByType } from '@api/uc/dict'
import { FormType } from '@/enums'
import TreeFilter from '@/components/TreeFilter/index.vue'
const initParam = reactive({ deptId: '' })
const proTableRef = ref<ProTableInstance>()
// 默认部门id，如果不需要可以去除该属性
// const tableData = []

function refresh() {
  proTableRef.value?.getTableList()
}

// 用户类别
async function userTypes() {
  const data = await listDictByType('user_type')
  return data
}
// 部门树
async function treeDept() {
  const data = await getAllDeptTree()
  return { data }
}

// 部门树
function roleOptions() {
  return listRoleOption()
}

function changeDept(val: string) {
  proTableRef.value!.pageable.current = 1
  initParam.deptId = val
}

function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

// 表格列
const columns = reactive<ColumnProps<User.Record>[]>([
  // { type: 'avatar', label: '头像', width: 60 },
  { type: 'index', label: '序号', width: 60, index: getIndex },
  { prop: 'username', label: '用户名', search: { el: 'input', key: 'username', order: 3 }, align: 'center', minWidth: 150 },
  { prop: 'nickname', label: '昵称', search: { el: 'input', key: 'nickname' }, align: 'center', minWidth: 150 },
  {
    prop: 'deptId',
    label: '部门',
    enum: treeDept,
    fieldNames: { label: 'name', value: 'id' },
    minWidth: 150
  },
  { prop: 'phone', label: '手机号', align: 'center', search: { el: 'input', key: 'phone', order: 4 }, minWidth: 120 },
  { prop: 'email', label: '邮箱', align: 'center', minWidth: 180, isShow: false },
  { prop: 'roleId', label: '角色', align: 'center', enum: roleOptions, search: { el: 'select', key: 'roleId' } },
  { prop: 'type', label: '用户类别', align: 'center', enum: userTypes, search: { el: 'select', key: 'type' } },
  { prop: 'areaId', label: '区域', search: { el: 'input', key: 'areaId', order: 1 }, isShow: false },
  { prop: 'groupId', label: '分组', search: { el: 'input', key: 'groupId' }, isShow: false },
  { prop: 'postId', label: '岗位', isShow: false },
  // { prop: 'createTime', label: '创建时间', render: scope => dateTimeFormat(scope.row.createTime), isShow: false },
  // { prop: 'updateTime', label: '修改时间', render: scope => dateTimeFormat(scope.row.createTime), isShow: false },
  // { prop: 'lockFlag', label: '状态', enum: lockFlagDict, tag: true, search: { el: 'select' }, width: 100 },
  { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
])

const loadTable = (query: User.Query) => {
  query.order = 'update_time desc'
  return pageUser(query)
}
// 打开 drawer(新增、查看、编辑)
const formRef = ref<InstanceType<typeof AccountForm> | null>(null)

// 查看用户
const onViewClicked = (row: any) => {
  formRef.value?.open(FormType.VIEW, row.id)
}

// 添加用户按钮
const onAddClicked = () => {
  formRef.value?.open(FormType.ADD)
}

// 编辑账户
const onEditClicked = (row: any) => {
  formRef.value?.open(FormType.EDIT, row.id)
}

// 删除账户
const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('您确定要删除该账户吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      removeUser(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        proTableRef.value?.getTableList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '删除取消!'
      })
    })
}
</script>
